<template>
  <div class="play-video">
    <van-sticky>
      <div class="play-header">
        <div class="player-l">
          <div class="back--icon" @click="goBack">
            <span>
              <svg t="1639450311659" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2305" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="2306"></path></svg>
            </span>
          </div>
          <div class="info">
            <span>视频详情</span>
          </div>
        </div>

        <!-- <div class="player-r">
          <div class="video-name">
            <span>{{ videoName }}</span>
          </div>
        </div> -->
        
      </div>
    </van-sticky>

    <div class="video-playing" style="width: 100%; height: 240px;">
      <video
        :src="src"
        :controls="controls"
        class="video-js vjs-big-play-centered vjs-fluid"
        style="width: 100%; height: 100%; object-fit:contain"
        autoplay="autoplay">
      </video>
    </div>

    <div class="content">
      <div class="play-singer">
        <div class="video-info">
          <div class="player-img">
            <img :src="imgUrl" alt="">
          </div>
          <div class="player-name">
            <span>{{ singerName }}</span>
          </div>
        </div>

        <div class="video-desc">
          <span>
            <svg t="1639549963335" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2691" width="200" height="200"><path d="M512 512V170.666667h42.666667v341.333333h341.333333v42.666667h-341.333333v341.333333h-42.666667v-341.333333H170.666667v-42.666667h341.333333z" fill="#444444" p-id="2692"></path></svg>
          </span>
          <span>关注</span>
        </div>
      </div>

      <div class="video-name">
        <div class="v-title">
          <h4>{{ videoTitle }}</h4>
        </div>
        <div class="v-desc">
          <span>发布：{{ publicTime | formatDate }}</span>
          <span>播放：{{ playCount }}次</span>
        </div>
        <div class="v-type">
          <div v-for="(item,index) in videoGroup" :key="index">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <div class="video-detail">
        <div class="person-icon">
          <div class="detail-icon">
            <span>
              <svg t="1639467498957" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2464" width="200" height="200"><path d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z" p-id="2465"></path></svg>
            </span>
            <span>赞({{ likeCount }})</span>
          </div>
          <div class="detail-icon">
            <span>
              <svg t="1639467828081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17026" width="200" height="200"><path d="M970.666667 213.333333H546.586667a10.573333 10.573333 0 0 1-7.54-3.126666L429.793333 100.953333A52.986667 52.986667 0 0 0 392.08 85.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333334v704a53.393333 53.393333 0 0 0 53.333333 53.333333h874.666667a53.393333 53.393333 0 0 0 53.333333-53.333333V266.666667a53.393333 53.393333 0 0 0-53.333333-53.333334z m10.666666 629.333334a10.666667 10.666667 0 0 1-10.666666 10.666666H96a10.666667 10.666667 0 0 1-10.666667-10.666666V138.666667a10.666667 10.666667 0 0 1 10.666667-10.666667h296.08a10.573333 10.573333 0 0 1 7.54 3.126667l109.253333 109.253333A52.986667 52.986667 0 0 0 546.586667 256H970.666667a10.666667 10.666667 0 0 1 10.666666 10.666667z m-287.913333-344.366667L596 484.146667l-43.533333-88.253334a21.333333 21.333333 0 0 0-38.266667 0L470.666667 484.146667l-97.4 14.153333A21.333333 21.333333 0 0 0 361.426667 534.666667l70.473333 68.666666-16.666667 97.006667a21.333333 21.333333 0 0 0 30.953334 22.486667L533.333333 677.086667l87.113334 45.793333a21.333333 21.333333 0 0 0 30.953333-22.486667l-16.666667-97.006666 70.473334-68.666667a21.333333 21.333333 0 0 0-11.82-36.393333zM596.953333 580.666667a21.333333 21.333333 0 0 0-6.14 18.88l11.226667 65.453333-58.78-30.9a21.333333 21.333333 0 0 0-19.853333 0l-58.78 30.9 11.226666-65.453333a21.333333 21.333333 0 0 0-6.14-18.88l-47.553333-46.36 65.72-9.546667a21.333333 21.333333 0 0 0 16.06-11.673333L533.333333 453.54l29.393334 59.546667a21.333333 21.333333 0 0 0 16.06 11.673333l65.72 9.546667z" fill="#5C5C66" p-id="17027"></path></svg>
              </span>
            <span>收藏({{ commentCount }})</span>
          </div>
          <div class="detail-icon">
            <span>
              <svg t="1639467871881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19371" width="200" height="200"><path d="M512 73.142857v73.142857C310.016 146.285714 146.285714 310.016 146.285714 512s163.730286 365.714286 365.714286 365.714286 365.714286-163.730286 365.714286-365.714286h73.142857c0 242.358857-196.498286 438.857143-438.857143 438.857143S73.142857 754.358857 73.142857 512 269.641143 73.142857 512 73.142857z m354.450286 122.258286l-339.309715 339.309714L475.428571 482.998857 812.141714 146.285714h-201.691428V73.142857h329.142857v329.142857h-73.142857V195.401143z" p-id="19372"></path></svg>
            </span>
            <span>分享({{ shareCount }})</span>
          </div>
        </div>

        <div class="report-video">
          <span>举报</span>
        </div>
      </div>

      <div class="similar-video">
        <similar-video :title="similarmvTitle" :data="similarmvList"></similar-video>
      </div>

      <div class="comment-info">
        <hot-comment v-if="offset == 0" :data="hotComment" :title="hotTitle"></hot-comment>
        <new-comment :data="newComment" :title="newTitle" :totalCount="totalCount"></new-comment>

        <div class="pagination">
          <van-pagination v-model="currentPage" 
            :total-items="totalCount" 
            :show-page-size="5" 
            :items-per-page="20" force-ellipses
            @change="pageChange">
            <template #prev-text>
              <van-icon name="arrow-left" />
            </template>
            <template #next-text>
              <van-icon name="arrow" />
            </template>
          </van-pagination>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>

  import { getVideoUrl, getVideoDetail, getVideoInfo, getRelatedVideo, getVideoComment } from '../../api/video'
  import { formatDate } from '../../common/js/formatDate'

  import SimilarVideo from '../../components/play-mv/cpns/similar-mv.vue'
  import HotComment from '../../components/play-mv/cpns/hot-comment.vue'
  import NewComment from '../../components/play-mv/cpns/new-comment.vue'
  // import { getHotSong } from '../../api/singer'

  // import similarmv from './cpns/similar-mv.vue'
  // import HotComment from './cpns/hot-comment.vue'
  // import NewComment from './cpns/new-comment.vue'


  export default {
    components:{
      SimilarVideo,
      HotComment,
      NewComment
    },

    data() {
      return {
        src:"",
        controls:true,
        player: null,
        videoName:'',
        imgUrl:'',
        singerName:'',
        videoTitle:'',
        publicTime:'',
        playCount:0,
        videoGroup:[],
        likeCount:0,
        commentCount:0,
        shareCount:0,
        offset: 0,
        limit:20,
        similarmvTitle:'相似视频',
        similarmvList:[],
        
        hotTitle:'精彩评论',
        hotComment:[],
        newTitle:'最新评论',
        newComment:[],
        totalCount:0,
        // commentList:[],
        currentPage:1,
      };
    },
    inject: ['reload'],

    created(){
      this._getVideoUrl(this.$route.params.id);
      this._getVideoDetail(this.$route.params.id);
      this._getVideoInfo(this.$route.params.id);
      this._getRelatedVideo(this.$route.params.id);
      this._getVideoComment(this.$route.params.id);
    },

    methods:{
      _getVideoUrl(id){
        let params = {
          id
        }
        getVideoUrl(params).then((res) => {
          console.log(res);
          this.src = res.urls[0].url;
        })
      },


      _getVideoDetail(id){
        let params = {
          id
        }
        getVideoDetail(params).then((res) => {
          // console.log(res);
          this.imgUrl = res.data.creator.avatarUrl;
          this.singerName = res.data.creator.nickname;
          this.videoTitle = res.data.title;
          this.publicTime = res.data.publishTime;
          this.playCount = res.data.playTime;
          this.videoGroup = res.data.videoGroup;
        })
      },

      _getVideoInfo(vid){
        let params = {
          vid
        }
        getVideoInfo(params).then((res) => {
          // console.log(res);
          this.likeCount = res.likedCount;
          this.commentCount = res.commentCount;
          this.shareCount = res.shareCount;
        })
      },

      _getRelatedVideo(id){
        let params = {
          id
        }
        getRelatedVideo(params).then((res) => {
          // console.log(res);
          this.similarmvList = res.data;
        })
      },

      _getVideoComment(id){
        let params = {
          id,
          offset:this.offset,
          limit:this.limit
        }
        getVideoComment(params).then((res) => {
          console.log(res);
          this.hotComment = res.hotComments;
          this.newComment = res.comments;
          this.totalCount = res.total;
        })
      },

      pageChange(val){
        // console.log(val);
        this.offset = (val-1)*this.limit;
        let params = {
          id:this.$route.params.id, 
          offset:this.offset,
          limit:this.limit
        }
        getVideoComment(params).then((res) => {
          console.log(res);
          this.newComment = res.comments
        })
      },

      goBack(){
        this.$router.back();
        this.reload();
      },

      replaceName(name){
        let result = name.replace(/\,/g,'/');
        return result;
      },

      playNum(Num){
        let result = Math.floor(Num / 10000);
        return result;
      }
    },

    filters:{
      formatDate(time){
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd');
      }
    },

    beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
    }
  }
</script>

<style scoped>
.play-header{
  display: flex;
  /* justify-content: space-between; */
  padding: 10px;
  background: #fafafa;
}

.player-l{
  display: flex;
  align-items: center;
  width: 50%;
}

.player-r{
  display: flex;
  align-items: center;
}

.play-singer{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.video-info{
  display: flex;
  align-items: center;
}

.player-img img{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  margin-right: 10px;
}

.player-name{
  font-size: 15px;
}

.video-desc{
  font-size: 12px;
  color: red;
  display: flex;
  background: pink;
  padding: 5px 10px 5px 10px;
  border-radius: 30px;
}

.video-desc .icon{
  font-size: 1.2em;
  color: red;
}

.video-name{
  display: flex;
  flex-direction: column;
  margin: 5px 0px 5px 10px;
}

.video-name .v-desc{
  font-size: 13px;
  color: rgb(207, 207, 207);
}

.video-name .v-type{
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  cursor: pointer;
}

.v-type span{
  font-size: 14px;
  margin: 5px;
}

/* 图标部分 */
.video-detail{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-right: 10px;
}

.person-icon{
  display: flex;
  width: 90%;
}

.detail-icon{
  display: flex;
  justify-content: center;
  text-align: center;
  /* align-items: center; */
  border: 1px solid;
  width: 30%;
  border-radius: 20px;
  padding: 5px 0px 5px 0px;
  margin: 10px;
}

.detail-icon .icon{
  font-size: 1.2em;
}

.detail-icon span:first-child{
  margin-right: 5px;
}

.content{
  padding-bottom: 70px;
}
</style>